<template>
  <div>
    <br />
    <a-card class="card-content">
      <a-row :gutter="24">
        <a-col :span="22">
          <div class="flex flex-a-c">
            <span class="serialNumber"
              >{{ query.wareHouseName }}
              <a-divider type="vertical" />
              货区编号 {{ query.locationName }}
              <a-divider type="vertical" />
              货架编号 {{ query.serialNumber }}</span
            >
            <span class="number">
              <a-divider type="vertical" />
              货架行数 {{ query.rowLine || "" }} 货架列数 {{ query.col }}
              <a-divider type="vertical" />
            </span>

            <div class="categoryBox flex flex-a-c">
              <div
                class="categoryItem flex flex-a-c"
                v-for="(item, index) in categoryList"
                :key="index"
              >
                <div
                  class="tag"
                  :style="{
                    color: item.color,
                    background: item.color,
                    border: `1px solid ${item.color}`,
                  }"
                ></div>
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="2">
          <a-button type="primary" @click="handleBatchCode"
            >二维码下载
          </a-button>
        </a-col>
      </a-row>

      <a-row v-for="(item, index) in tableData" :key="index">
        <a-divider />
        <a-col
          :span="2"
          v-for="(element, each) in item.childrenList"
          :key="each"
        >
          <div
            class="shelvesItem"
            :style="{
              background: caseContentBack(element.status),
              border: `1px solid ${caseContentBack(element.status)}`,
            }"
          >
            <div
              class="header flex flex-a-c flex-j-s-b"
              :style="{ background: caseHeadBack(element.status) }"
            >
              <div>{{ element.rowLine }}-{{ element.col }}</div>
              <div>
                <a-icon
                  type="qrcode"
                  :style="{
                    color: '#FFFFFF',
                    fontSize: '16px',
                    marginRight: '6px',
                  }"
                  @click="handleQrcode(element)"
                />
                <a-dropdown>
                  <a-icon
                    type="setting"
                    :style="{ color: '#FFFFFF', fontSize: '16px' }"
                  />

                  <a-menu slot="overlay">
                    <a-menu-item key="0">
                      <a-button
                        :disabled="
                          element.shelfGoodsNumList.length > 0 ? true : false
                        "
                        @click="handleUpdateStatus(element, 0)"
                        >空仓</a-button
                      >
                    </a-menu-item>
                    <a-menu-item key="1">
                      <a-button @click="handleUpdateStatus(element, 2)"
                        >满仓</a-button
                      >
                    </a-menu-item>
                    <a-menu-item key="2">
                      <a-button @click="handleUpdateStatus(element, 3)"
                        >禁用</a-button
                      >
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
            </div>
            <!-- 没有商品 -->
            <div
              class="goodBox text-c"
              v-if="element.status === 0 || element.status === 3"
            >
              <img :src="caseImg(element.status)" alt="" />
              <div>{{ element.status === 0 ? "空仓" : "禁用" }}</div>
            </div>
            <!-- 商品 -->
            <div v-else>
              <div class="content">
                <div
                  v-for="(goods, current) in element.shelfGoodsNumList.slice(
                    0,
                    3
                  )"
                  :key="current"
                  class="flex flex-a-c flex-j-s-b goodsItem"
                >
                  <div class="goodName">{{ goods.goodsName }}</div>
                  <div>{{ goods.quantity }}</div>
                </div>
              </div>
              <div
                @click="handleDetail(element)"
                class="detail text-c"
                :style="{ color: caseHeadBack(element.status) }"
              >
                详情<a-icon type="right" />
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <WareShelvesModal ref="WareShelves" />
      <qrCode
        ref="qrCode"
        :label="qrModel.label"
        :text="qrModel.text"
        :qrSize="300"
      ></qrCode>
      <codeImage ref="codeImage"></codeImage>
    </a-card>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import qrCode from "./components/qrCode";
import WareShelvesModal from "./components/WareShelvesModal.vue";
import codeImage from "@/components/codeImage";
import {
  caseImg,
  categoryList,
  caseContentBack,
  caseHeadBack,
} from "./components/config";
import { CodeNo } from "@/unit/QRCodeConfig";
export default {
  components: { qrCode, WareShelvesModal, codeImage },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      query: {},
      model: {},
      tableData: [],
      qrModel: {
        label: "", // 二维码底部内容
        text: "", // 二维码内容
      },
      categoryList,
    };
  },
  mounted() {
    let { shelfAreaId } = this.$route.query;
    this.query = this.$route.query;
    if (shelfAreaId) {
      this.model.shelfAreaId = Number(shelfAreaId);
      this.getList();
    }
  },
  methods: {
    caseImg,
    caseContentBack,
    caseHeadBack,
    // 获取列表数据
    async getList(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      const params = {
        id: this.model.shelfAreaId,
      };
      const res = await api.ShelfAreaDetail(params);
      this.tableData = res.data.data.resultList;
    },
    // 修改库位状态
    async handleUpdateStatus(record, status) {
      let params = Object.assign({}, record);
      params.status = status;
      const res = await api.shelfOrUpdate(params);
      this.getList();
    },
    handleBatchCode() {
      let newArr = [];
      this.tableData.forEach((item) => {
        newArr = newArr.concat(item.childrenList);
      });
      let dataSource = newArr.map((item) => {
        let { id, label } = item;
        return {
          title: label,
          label,
          text: JSON.stringify({ id, label, QRCode: CodeNo.WarehouseLocation }),
        };
      });
      this.$refs.codeImage.title = "商品二维码";
      this.$refs.codeImage.showModal(
        dataSource,
        `货架编号 ${this.query.serialNumber}`
      );
    },
    // 二维码
    handleQrcode(record) {
      let { label, id } = record;
      let newObj = { label, id, QRCode: CodeNo.WarehouseLocation };
      let text = JSON.stringify(newObj);
      this.$refs.qrCode.title = "库位二维码";
      this.qrModel.label = label;
      this.qrModel.text = text;
      this.$refs.qrCode.list = this.qrModel.label.split(",");
      this.$refs.qrCode.model.Shelves = `${this.query.locationName}-${this.query.serialNumber}-${record.rowLine}-${record.col}`;
      this.$set(
        this.$refs.qrCode.model,
        "WareHouse",
        `${this.query.wareHouseName}`
      );
      this.$refs.qrCode.showModal();
    },
    handleDetail(record) {
      this.$refs.WareShelves.showModal(record);
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
.card-content {
  button {
    margin-right: 20px;
  }
}
::v-deep .ant-tree-node-content-wrapper {
  width: 90%;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
.tableBox {
  text-align: center;
  border: 1px solid #333;
  height: 100px;
  line-height: 100px;
}
.categoryBox {
  width: 50%;
  padding: 0 25px;
  .categoryItem {
  margin-top: 2px;
    width: 70px;
    .tag {
      width: 13px;
      height: 13px;
      opacity: 0.5;
      border-radius: 4px;
      margin-right: 5px;
    }
  }
}
.serialNumber {
  margin-top: 6px;
  font-size: 14px;
  font-weight: bold;
  color: #3c3c3c;
}
.number {
  font-size: 12px;
  font-weight: 400;
  color: #3c3c3c;
  margin-top: 3px;
  // line-height: 20px;
  // height: 20px;
}
.shelvesItem {
  height: 150px;
  border: 1px solid #22ac38;
  background: rgba(34, 172, 56, 0.15);
  border-radius: 4px;
  margin: 0 5px;
  .header {
    width: 100%;
    height: 35px;
    background: rgba(34, 172, 56, 0.5);
    padding: 0 15px;
    div:nth-child(1) {
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
    }
    div:nth-child(2) {
      font-size: 10px;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .content {
    height: 88px;
    padding: 15px;
    .goodsItem {
      margin: 3px 0;
    }
    span {
      font-size: 12px;
      font-weight: 400;
      color: #3c3c3c;
    }
  }
}
.detail {
  font-size: 12px;
  font-weight: 400;
}
.goodBox {
  margin: 29px 0;
  img {
    width: 29px;
    height: 29px;
    opacity: 0.5;
    margin-bottom: 10px;
  }
}
.goodName {
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
